<template>
  <div class="page_view flex">
    <van-search
      v-model="query"
      shape="round"
      background="#4fc08d"
      :label="'共' + page.total"
      placeholder="请输入搜索关键词"
    />
    <div class="flex1 at">
      <van-pull-refresh v-model="page.loading" @refresh="onRefresh">
        <van-list
          v-model="page.loading"
          :finished="page.finish"
          finished-text="没有更多了"
          @load="onLoad"
          ref="v_list"
        >
          <div class="note_list pd10">
            <my-card v-for="(item,index) in list" :key="index" :note="item" @onShowNote="onShowNote" :isAdmin="isAdmin" @deleteNote="deleteNote"></my-card>
          </div>
        </van-list>
      </van-pull-refresh>
    </div>
    <van-popup v-model="show" class="note_popup" close-on-click-overlay>
      <div class="dialog_panel">
        <my-card :note="noteItem" @onShowNote="onShowNote" :show="show"></my-card>
      </div>
      <div style="text-align: right;padding: 10px" @click="show = false">
        <van-icon name="shrink" size="30px" color="#cccccc"/>
      </div>
    </van-popup>
  </div>
</template>

<script>
export default {
  name: 'index',
  props: {
    isAdmin: {
      type: Boolean,
      default: false
    }
  },
  data () {
    return {
      scrollY: 0,
      query: '',
      list: [],
      page: {
        pageNum: 0,
        finish: false,
        loading: false,
        total: 0
      },
      noteItem: null,
      show: false
    }
  },
  watch: {
    query:function () {
      this.getData()
    }
  },
  methods: {
    init(){
      this.list = []
      this.page = {
        pageNum: 0,
        finish: false,
        loading: true,
        total: 0
      }
    },
    onLoad(){
      let fn = 'getNoteList',
        params = {
          page: this.page.pageNum
        };
      if (this.query) {
        params.query = this.query
        fn = 'queryNoteList'
      }
      this.page.loading = true
      this.request[fn](params).then(res => this.handleData(res))
    },
    onShowNote(note){
      this.noteItem = note
      this.show = true
    },
    getData(){
      if (this.page.loading){
        return
      }
      this.init();
      this.onLoad();
    },
    onRefresh(){
      this.init();
      this.onLoad();
    },
    handleData(res){
      let list = res.data.content
      list.map(function (val) {
        val.tags = val.tags.split(',')
      });
      this.page.pageNum ++;
      this.list = this.list.concat(list)
      this.page.finish = res.data.last
      this.page.loading = false
      this.page.total = res.data.totalElements
    },
    deleteNote(item){
      this.$dialog.alert({
        title: '提示',
        message: '确定删除此便签？',
        showCancelButton: true
      }).then(() => {
        this.request.deleteNote(item)
          .then(res=>{
            if(res.data === 1) {
              for (let i = 0; i < this.list.length; i++) {
                if (this.list[i].id === item.id){
                  this.list.splice(i,1);
                  this.$notify({ type: 'success', message: '删除成功' });
                  break
                }
              }
            }
          });
      }).catch(()=>{
      });
    }
  },
  created() {
    this.getData()
  },
  activated() {
    this.GFN.setScroller(this, 'v_list')
  },
  deactivated(){
    this.GFN.saveScroller(this, 'v_list')
  }
}
</script>
<style lang="less">
  .page_view{
    background: #F7F8FA;
  }
  .dialog_panel{
    padding-top: 10px;
    width: 100%;
    max-width: 512px;
    margin: auto;
  }
</style>
